<template>
  <el-main>
    <div id="wrapper">
      <img src="../assets/image/layout.png" />
      <div class="table">
        <div class="date">
          <button @click="pre" :disabled="preDate">&lt;</button>
          {{date}}
          <button @click="next" :disabled="nextDate">&gt;</button>
          </div>
          <el-table
    :data="layoutList"
    stripe
    style="width: 100%">
    <el-table-column
      prop="filmName"
      label="电影名称"
      width="200">
    </el-table-column>
    <el-table-column
      prop="hallName"
      label="影厅"
      width="180">
    </el-table-column>
    <el-table-column
      prop="price"
      label="单价(￥)"
      width="180">
    </el-table-column>
     <el-table-column
      prop="playOpenTime"
      label="放映时间"
      width="180">
    </el-table-column>
     <el-table-column
      label=""
      width="180">
      <template slot-scope="scope">
        <el-button type="primary" @click="buyTicket(scope.row.playId,scope.row.filmId,scope.row.playOpenTime)">购票</el-button></el-button>
      </template>
    </el-table-column>
  </el-table>
      </div>
    </div>
  </el-main>
</template>
<script>
export default {
  data() {
    return {
    layoutList:[],
    date:'',
    preDate:true,
    nextDate:false
    };
  },
  created() {
        this.date = this.formatDate(new Date(),1) 
    this.getPlayList()

  },
  methods: {
    async  getPlayList(){
      this.layoutList = []
        const {data:res} = await this.$http.get('filmplay/getTotleList')
        if(res.code != 200){
         return this.$message.error(res.message)
        }
        else{
          res.data.forEach(element => {
            console.log(element.playOpenTime.substring(0,element.playOpenTime.indexOf(' ')))
            console.log(this.date)
            if(element.playOpenTime.substring(0,element.playOpenTime.indexOf(' ')) == this.date){
              this.layoutList.push(element)
            }
          });
        }
      },
      pre(){
        if(this.date != this.formatDate(new Date(),1)){
          this.preDate = true
          this.nextDate = false
          this.date = this.formatDate(new Date(),1)
           this.getPlayList()
        }
   
      },
      next(){
       if(this.date == this.formatDate(new Date(),1)){
          this.preDate = false
          this.nextDate = true
          this.date = this.formatDate(new Date(new Date().getTime()+60 * 60 *24 * 1000),1)
          this.getPlayList()
        }
  
      },
      buyTicket(playId,id,time){
      sessionStorage.setItem('playId',playId)
       this.$router.push({
             name:'seat',
              query:{
                filmId:id,
                openTime:time
              },
            
              })
      }
  },
};
</script>
<style lang="less" scoped>
#wrapper {
  width: 80%;
  min-height: 100%;
  margin: 0 auto;
  margin-top: -20px;
  img {
    margin: 10px auto;
    display: block;
  }
  h1 {
    position: relative;
    top: -126px;
    left: 487px;
    font-size: 2.5em;
    margin-bottom: 10px;
  }
}
.el-divider--horizontal {
  display: block;
  height: 1px;
  width: auto;
  margin: 0;
  margin-left: 60px;
}
.table{
  width:80%;
  margin: 0 auto;
  text-align: center;
}
.date{
  font-size: 14px;
  button{
    margin:0 30px;
  }
}
</style>